/*
 * @Author: yuanxiang 
 * @Date: 2018-05-12 11:04:33
 * @Last Modified by: hy
 * @Last Modified time: 2018-06-21 15:46:01
 */

<template>
	<bg-lay-out class="areaAnalysis">
    <div slot="headerText">房联行数据中心</div>
    <sel-time slot="headerMain" :cityId="selTimeCityId" style="text-align:center;margin-top: 29px;" val="2" :districtId="params.districtId"  @onChangeTime="onChangeTime"></sel-time>
          <div slot="main">
                <el-row type="flex">
                    <div class="topLeftCon">
                        <el-row type="flex" align="center"  style="padding:60px 78px;flex-wrap: wrap;">
                          <div v-for="(item,id) in topLeftData" :key="id" class="topLeftItem">
                            <div class="itemTop">
                              <img class="itemTopIcon" :src="'../../../../../static/img/flh/'+ item.url" >
                              <div style="font-size:20px;margin-left:10px">{{item.name}}</div>
                            </div>
                            <b class="boldFont itemNum">
                              <i-count-up
                                :startVal="startVal"
                                :endVal="item.val"
                                :decimals="decimals"
                                :duration="duration"
                                :options="options"/>
                            </b>
                          </div>
                        </el-row>
                    </div>
                    <div class="topLeftCon" style="margin-left:20px">
                      <area-baidu-map  style="height:383px"  @on-map="onMap" :center="areaName" v-model="storeArr"></area-baidu-map>
                        <!-- <b-map-area style="height:383px"  @on-map="onMap" :center="areaName" v-model="storeArr"></b-map-area> -->
                    </div>
            </el-row>
            <el-row type="flex">
              <div class="midCon">
                <el-row type="flex"  justify="space-between" style="width:100%">
                  <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="minTopLeftCon">
                    <chart-lay-out>
                      <span slot="title">房源状态分析</span>
                      <pie-chart slot="main" v-model="housingConditionArr"></pie-chart>
                    </chart-lay-out>
                  </el-col>
                  <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="minTopLeftCon">
                    <chart-lay-out>
                      <span slot="title">房源类型占比统计</span>
                      <pie-chart slot="main" v-model="clinchDealArr"></pie-chart>
                    </chart-lay-out>
                  </el-col>
                   <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="minTopLeftCon">
                      <div  class="topRightLLine">
                          <div class="topRightLTopTitleLine">
                          </div>
                          <span class="topRightLTopTitle">共享营销成交量</span>
                      </div>
                      <chart  :chartStyle="'min-height:230px;height:330px'" ref="marketing" :option="marketingOption"  />
                      <div class="chartLine"></div>
                  </el-col>
                  <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="minTopLeftCon">
                      <div  class="topRightLLine">
                          <div class="topRightLTopTitleLine">
                          </div>
                          <span class="topRightLTopTitle">客源关注</span>
                      </div>
                      <div style="height:330px;margin-top:10px" id="hotChart"></div>
                      <div class="chartLine"></div>
                  </el-col>
                </el-row>
                <div class="lineCon">
                   <div class="lineImg"></div>
                </div>
                <el-row type="flex"  justify="space-between" style="width:100%">
                  <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="minTopLeftCon">
                    <chart-lay-out>
                      <span slot="title">户型成交统计</span>
                      <bar-charts slot="main" v-model="transactionVolumeArr"></bar-charts>
                    </chart-lay-out>
                  </el-col>
                  <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="minTopLeftCon">
                    <chart-lay-out>
                      <span slot="title">房源成交收入</span>
                      <bar-chart slot="main" v-model="propertiesAnalysisArr"></bar-chart>
                    </chart-lay-out>
                  </el-col>
                  <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="minTopLeftCon">
                    <chart-lay-out :showLine="false">
                      <span slot="title">区域客源分析</span>
                      <pie-chart slot="main" v-model="regionalCustomersArr"></pie-chart>
                    </chart-lay-out>
                  </el-col>
                </el-row>
              </div>
            </el-row>
            <el-row class="marginBot-20" type="flex">
              <div class="bottomCon">
                 <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="minTopLeftCon">
                   <chart-lay-out>
                     <span slot="title">门店排名Top10</span>
                     <bar-chart slot="main" v-model="storesIncomeArr" :option="personalClinchOption"></bar-chart>
                   </chart-lay-out>
                  <div class="bottomSelBtn absTopRight-50-20">
                    <div :class="storesIncome ? 'storeActive':'storeUnActive'" @click="changeStoresIncomeDefault('19002')" >
                      <el-button size="mini" round>按成交量</el-button>
                    </div>
                    <div :class="storesIncome ? 'storeUnActive':'storeActive'" @click="changeStoresIncomeDefault('19004')" >
                      <el-button size="mini" round>按收入</el-button>
                    </div>
                  </div>
                  </el-col>
                   <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="minTopLeftCon">
                     <chart-lay-out :showLine="false">
                        <span slot="title">区域个人销量排名Top10</span>
                        <bar-chart slot="main" v-model="personalClinchArr" :option="personalClinchOption"></bar-chart>
                     </chart-lay-out>
                     <div class="bottomSelBtn absTopRight-50-20">
                        <div :class="personalClinch ? 'storeActive':'storeUnActive'" @click="changePersonalClinch('19003')" >
                          <el-button size="mini" round>按成交量</el-button>
                        </div>
                        <div :class="personalClinch ? 'storeUnActive':'storeActive'" @click="changePersonalClinch('19005')" >
                          <el-button size="mini" round>按收入</el-button>
                        </div>
                     </div>
                  </el-col>
              </div>
            </el-row>
          </div>
	</bg-lay-out>
</template>
<script>
import chartLayOut from "@/components/Charts/chartLayOut";
import echarts from "echarts";
require("echarts-wordcloud");
import selTime from "@/components/flh/selTime";
import bMapArea from "@/components/flh/bMapLuoyangArea";
import areaBaiduMap from "@/components/flh/areaBaiduMap"
import bgLayOut from "@/components/bgLayOut/index";
import {
  GetDataByDoubleTargetForTwo, // 双向指标统计
  GetDataByTargetForTwo, // 单项指标统计
  GetAllStoreByAreaId,
  GetBusinessRanking
} from "@/api/flh/home";
import chart from "../../../../components/Charts/newChart";
import ICountUp from "vue-countup-v2";
import pieChart from "@/components/Charts/pieChart";
import barChart from "@/components/Charts/barChart";
import barCharts from "@/components/Charts/barCharts";
import lineChart from "@/components/Charts/lineChart";
import { getTokenName } from "@/utils/auth";
export default {
  components: {
    chart,
    selTime,
    bMapArea,
    ICountUp,
    bgLayOut,
    pieChart,
    barChart,
    barCharts,
    lineChart,
    chartLayOut,
    areaBaiduMap
  },
  computed: {
    tokenName() {
      return getTokenName();
    }
  },
  data() {
    return {
      selTimeCityId: this.$route.query.cityId,
      cityId: 0,
      personalClinchOption: {
        exchange: true,
        grid: {
          width: "85%",
          left: "10%"
        }
      },
      personalClinch: true, // 按钮选择
      storesIncome: true,
      marketingOption: {},
      topLeftData: [
        {
          url: "flh-house.png",
          name: "房源 (套)",
          val: 23400
        },
        {
          url: "flh-mans.png",
          name: "客源 (位)",
          val: 23400
        },
        {
          url: "flh-dealSucess.png",
          name: "成交 (套)",
          val: 23400
        },
        {
          url: "flh-money.png",
          name: "收入 (元)",
          val: 23400
        },
        {
          url: "flh-shop.png",
          name: "门店 (家)",
          val: 23400
        },
        {
          url: "flh-man.png",
          name: "区域经纪人 (位)",
          val: 23400
        }
      ],
      workNum: 0,
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      storeId: "", // 在地图上选择的门店id
      storesIncomeDefault: "19002",
      areaName: "老城区",
      storeArr: [], // 门店数据
      storeTaskOption: {},
      marketingChart: null, // 共享营销成交量
      hotChart: null, // 客源关注
      regionalCustomersArr: [], // 区域客源分析
      propertiesAnalysisArr: [], // 房源成交收入
      housingConditionArr: [], // 房源状态的统计
      clinchDealArr: [], // 房源量图表
      transactionRevenueOption: {}, // 成交户型统计
      transactionVolumeArr: [], // 房源类型占比
      storesDealOption: {}, // 门店成交top10
      storesIncomeArr: [], // 门店收入top10
      personalClinchArr: [], // 个人收入
      screenObj: {}, // 存放数据
      params: {
        startTime: "",
        endTime: "",
        districtId: this.$route.query.districtId, // 获取上页面传递过来的参数
        queryType: null
      }
    };
  },
  methods: {
    onMap(res) {
      this.$router.push({
        path: "storeAnalysis",
        query: {
          storeId: res.id,
          cityId: this.selTimeCityId
        }
      });
    },
    // 经纪人
    async fetchAreaPerson() {
      // 经纪人不受时间控制
      var params = {
        cityId: this.cityId,
        districtId: this.screenObj.area.id,
        queryType: "18002"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.topLeftData[5].val = res.data.result.total;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 门店数量
    async fetchStoreNum() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        districtId: this.screenObj.area.id,
        queryType: "18001"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.topLeftData[4].val = res.data.result.total;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 合计收入
    async fetchSumIncome() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        districtId: this.screenObj.area.id,
        queryType: "18006"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.topLeftData[3].val = res.data.result.total;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 成交量
    async fetchVolume() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        districtId: this.screenObj.area.id,
        queryType: "18005"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.topLeftData[2].val = res.data.result.total;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 客源量
    async fetchCustomerNum() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        districtId: this.screenObj.area.id,
        queryType: "18004"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.topLeftData[1].val = res.data.result.total;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 房源量
    async fetchHouseNum() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        districtId: this.screenObj.area.id,
        queryType: "18003"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.topLeftData[0].val = res.data.result.total;
        }
      } catch (e) {
        console.log(e);
      }
    },
    changePersonalClinch(res) {
      this.personalClinch = !this.personalClinch;
      this.fetchPersonalClinch(res);
    },
    async fetchPersonalClinch(num) {
      var params = {
        cityId: this.cityId,
        districtId: this.screenObj.area.id,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        queryType: num
      };
      try {
        var res = await GetBusinessRanking(params, num);
        if (res.data.code === "0") {
          var resData = res.data.result;
          var resultArr = [];
          resData.forEach(item => {
            var obj = {}
            obj.name = item.xData
            obj.value = item.value
            resultArr.unshift(obj)
          })
          this.$set(this, "personalClinchArr", resultArr)
        }
      } catch (e) {
        console.log(e);
      }
    },
    changeStoresIncomeDefault(res) {
      this.storesIncome = !this.storesIncome;
      this.fetchStoresIncome(res);
    },
    // 门店收入top10
    async fetchStoresIncome(num) {
      try {
        var params = {
          cityId: this.cityId,
          districtId: this.screenObj.area.id,
          startTime: this.screenObj.gTime[0],
          endTime: this.screenObj.gTime[1],
          queryType: num
        };
        var res = await GetBusinessRanking(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "storesIncomeArr", resData);
          // this.initStoresIncomeChart(resData, num);
        }
      } catch (e) {
        console.log(e);
      }
    },
    initStoresIncomeChart(res, num) {
      var xData = [];
      var unit = "人";
      var data = {
        data: [],
        type: "bar",
        name: "",
        barWidth: 13,
        label: {
          show: true,
          normal: {
            show: true,
            position: "right",
            fontSize: 20,
            color: "#31cee6",
            fontFamily: "DIN Condensed Bold"
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: [0, 30, 30, 0],
            color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              {
                offset: 0,
                color: "#31cee6"
              },
              {
                offset: 1,
                color: "#0c43fd"
              }
            ])
          }
        }
      };
      res.forEach(item => {
        data.data.unshift(item.value);
        xData.unshift(item.xData);
      });
      var option = {
        exchange: true,
        xAxis: {
          type: "value",
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        yAxis: {
          data: xData,
          type: "category",
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params => this.$utils.formatterLine(res, params, unit)
        },
        grid: {
          top: "10%",
          right: "5%",
          bottom: "20%"
        },
        series: [data]
      };
      this.$set(this, "storesIncomeArr", option);
    },
    // 获取指定区域所有门店
    async fetchStoreForArea() {
      var params = {
        cityId: this.cityId,
        districtId: this.screenObj.area.id
      };
      try {
        var res = await GetAllStoreByAreaId(params);
        if (res.data.code === "0") {
          this.storeArr = res.data.result;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 改变时间
    onChangeTime(res) {
      $(".bg4Con").scrollTop(0);
      this.selTimeCityId = res.cityId;
      this.cityId = res.cityId;
      this.$set(this, "areaName", res.area.name);
      this.$set(this, "screenObj", res);
      this.$set(this, "personalClinch", true);
      this.$set(this, "storesIncome", true);
      this.fetchData();
    },
    // 门店任务完成情况
    async fetchClinchDeal() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        districtId: this.screenObj.area.id, // 获取上页面传递过来的参数
        queryType: 18010
      };
      try {
        var res = await GetDataByDoubleTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "clinchDealArr", resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 门店任务完成情况
    async fetchTransactionVolume() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        districtId: this.screenObj.area.id, // 获取上页面传递过来的参数
        queryType: 18018
      };
      try {
        var res = await GetDataByDoubleTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "transactionVolumeArr", resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 客源关注
    async fetchHotChart() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        districtId: this.screenObj.area.id, // 获取上页面传递过来的参数
        queryType: 18017
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.initHotChart(resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 客源状态分析
    async fetchHousingCondition() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        districtId: this.screenObj.area.id, // 获取上页面传递过来的参数
        queryType: 18012
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "housingConditionArr", resData.list);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 房源成交收入
    async fetchPropertiesAnalysis() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        districtId: this.screenObj.area.id, // 获取上页面传递过来的参数
        queryType: 18006
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "propertiesAnalysisArr", resData.list);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 区域客源分析
    async fetchRegionalCustomers() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        districtId: this.screenObj.area.id, // 获取上页面传递过来的参数
        queryType: 18004
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "regionalCustomersArr", resData.list);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 共享营销成交量
    async fetchMarketingChart() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        districtId: this.screenObj.area.id, // 获取上页面传递过来的参数
        queryType: 18007
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.initMarketingChat(resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 共享营销成交量
    initMarketingChat(resData) {
      var data = [];
      var legend = [];
      resData.list.forEach(item => {
        var Obj = {
          value: item.value,
          name: item.name,
          type: "pie"
        };
        data.push(Obj);
        var obj = {
          name: "",
          icon: "circle",
          textStyle: {
            color: "#31cee6",
            fontSize: 14,
            padding: [0, 10]
          }
        };
        obj.name = item.name;
        legend.push(obj);
      });
      var Option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "item",
          extraCssText: "text-align:center;background-color:transparent"
        },
        grid: {
          bottom: "20%"
        },
        legend: {
          data: legend,
          textStyle: {
            color: "#fff"
          },
          bottom: "20"
        },
        series: [
          {
            name: "共享营销",
            type: "funnel",
            label: {
              normal: {
                position: "inside",
                formatter: "{c}人\n\n{b}",
                textStyle: {
                  color: "#ffffff"
                }
              },
              emphasis: {
                position: "inside",
                fontSize: 20
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 0,
                opacity: 0.8
              }
            },
            data: data
          }
        ]
      };
      this.$set(this, "marketingOption", Option);
    },
    // 初始化热点C	hart
    initHotChart(resData) {
      var presents = [];
      resData.list.forEach(item => {
        presents.push(item.name);
      });
      var markUrl =
        "";
      //     	 var presents = ['价格', '意向户型', '意向区域', '房屋面积', '不限', '户型朝向', '楼层区间', '装修情况', '户型朝向', '房屋年限', '配套设施']
      var data = [];
      for (var i = 0; i < presents.length; ++i) {
        data.push({
          name: presents[i],
          value: (presents.length - i) * 20,
          textStyle: {
            normal: {},
            emphasis: {}
          }
        });
      }
      var maskImage = new Image();
      var colorArr = [
        "#da34fb",
        "#0c43fd",
        "#3771ff",
        "#6937fd",
        "#8d4cfd",
        "#31cee6"
      ];
      var Option = {
        series: [
          {
            type: "wordCloud",
            sizeRange: [20, 50], // 最小文字——最大文字
            rotationRange: [0, 0], // 旋转角度区间
            rotationStep: 90, // 旋转角度间隔
            maskImage: maskImage, // 遮罩图片
            width: 500, // 遮罩图片宽度
            height: 400, // 遮罩图片高度
            left: "center",
            top: "center",
            data: data,
            gridSize: 50, // 字符间距
            textStyle: {
              normal: {
                color: function(res) {
                  var cc = colorArr[res.dataIndex];
                  return cc;
                }
              }
            }
          }
        ]
      };
      var self = this;
      if (this.hotChart) {
        this.hotChart.clear();
        this.hotChart.dispose();
      }
      setTimeout(function() {
        self.hotChart = echarts.init(document.getElementById("hotChart"));
        maskImage.onload = function() {
          self.hotChart.setOption(Option);
        };
        maskImage.src = markUrl;
      }, 10);
    },
    // 获取数据
    fetchData() {
      this.fetchAreaPerson(); // 经纪人数量
      this.fetchStoreNum(); // 门店数量
      this.fetchSumIncome(); // 收入
      this.fetchVolume(); // 成交量
      this.fetchCustomerNum(); // 客源量
      this.fetchHouseNum(); // 房源量
      this.fetchStoreForArea(); // 获取指定区域所有门店
      this.fetchClinchDeal(); // 房源类型占比统计
      this.fetchTransactionVolume(); // 户型成交统计
      this.fetchStoresIncome("19002");
      this.fetchPersonalClinch("19003");
      this.fetchHotChart(); // 客源关注
      this.fetchHousingCondition(); // 房源状态
      this.fetchPropertiesAnalysis(); // 房源成交收入
      this.fetchMarketingChart(); // 共享营销成交量
      this.fetchRegionalCustomers(); // 区域客源分析
    },
    // 跳页面
    pushPage(name) {
      this.$router.push({
        path: name
      });
    }
  }
};
</script>
<style scoped lang="scss">
@import "../main.css";
@import "../../../../styles/base/_parameters";

.bottomSelBtn {
  @include flex-dr-ic-js;
  /* margin-right: 10px; */
}
.bottomSelBtn .storeUnActive .el-button {
  background: transparent;
  border: 0;
  color: #00d1ff;
}
.bottomSelBtn .storeActive .el-button {
  background: #00d1ff;
  border: 1px solid #00d1ff;
  color: black;
}
.topLeftItem {
  @include flex-dc-js;
  position: relative;
  height: 92px;
  margin-top: 38px;
  margin-left: 106px;
}
.topLeftItem:first-child {
  margin-left: 0px;
}
.topLeftItem:nth-child(4) {
  margin-left: 0px;
}
.topLeftItem .itemTop {
  @include flex-dr-ic-js;
  color: #2ff0d2;
}
.topLeftItem .itemTopIcon {
  width: 20px;
  height: 21px;
}
.topLeftCon .itemNum {
  position: absolute;
  top: 35px;
  left: 30px;
}
/* .topLeftItem:nth-child(n + 5) {
  transform: translateX(-15px);
} */
.lineImg {
  width: 1712px;
  height: 8px;
  color: #2ff0d2;
  @include bgImg(minLine);
}
.lineCon {
  @include flex-ic;
  width: 100%;
  text-align: center;
}
.chartLine {
  position: absolute;
  right: 0;
  top: 5%;
  width: 1px;
  height: 90%;
  background: rgba(#31cee6, .2);  
}
.minTopLeftCon {
  position: relative;
  /* margin-top: 10px; */
}
.bottomCon {
  @include flex-dr-ic-jsb;
  width: 100%;
  /* height: 393px; */
  margin-top: 20px;
  color: #2ff0d2;
  @include moduleBg(bg_1813x393);
}
.midCon {
  @include flex-dc;
  width: 100%;
  /* height: 792px; */
  margin-top: 20px;
  color: #2ff0d2;
  @include moduleBg(bg_1813x792);
}
.topRightLLine {
  @include flex-ic;
  margin-left: 36pt;
  margin-top: 12pt;
}
.topRightLTopTitle {
  font-size: 20px;
  margin-left: 6pt;
}
.topRightLTopTitleLine {
  width: 3px;
  height: 14px;
  margin-top: 6px;
  background: #2ff0d2;
}
.topLeftCon span {
  font-size: 50px;
  line-height: 60px;
  /* margin-left: 22pt; */
  margin-top: 2px;
}
.topLeftCon {
  @include flex-dc;
  width: 788px;
  /* height: 393px; */
  margin-top: 20px;
  color: #2ff0d2;
  @include moduleBg(bg_890x393);
}
.topLeftCon:nth-of-type(2) {
  width: 1010px;
}
/* topNav  --start */
.active {
  font-weight: bold;
}
/* topNav  --end */
.itemTop {
  width: 100%;
  padding: 5px 0;
  color: white;
  text-align: center;
}
</style>
